<script lang="ts" setup>
// @ts-ignore
import system from "~/config/SystemConfig";
// @ts-ignore
import {getFriendLink} from "~/server/friend.service";

definePageMeta({
    layout: false,
})
useHead({
    bodyAttrs: {
        class: 'page-template page-template-page-friends page'
    },
    title: '众星-' + system.slogan
})
const friendTitle = ref('众星')
const friendDesc = ref('时间久了才体会难得联系，中文博客不易，天涯路又远，不如结伴而行。')
const friendList = ref('' as any)

function getFriendList() {
    getFriendLink().then(({data}: any) => {
        friendList.value = data.data
    })
}

function makeQrCode(website: any) {
    let element = document.getElementsByClassName("friend-qr-image")[0]
    //每次生成前都置空子元素
    element.innerHTML = ''
    //@ts-ignore
    let qrcode = new QRCode(element, {
        width: 300,
        height: 300
    })
    qrcode.makeCode(website)
}

onMounted(() => {
    getFriendList()
})
</script>

<template>
    <NuxtLayout name="grid">
        <template v-slot:nav>
            <Nav :title="'众星'"/>
        </template>
        <template v-slot:main>
            <PageHeader :title="friendTitle" :desc="friendDesc">
                <template v-slot:other>
                    <nav class="taxonomy-nav fade-before fade-after">
                        <ul class="taxonomy-sub no-scrollbar card-sub active">
                            <template v-for="u in friendList">
                                <li>
                                    <a :href="'#'+u.name" :title="u.name">{{ u.name }}
                                        <span class="taxonomy-num">({{ u.friendList.length }})</span>
                                    </a>
                                </li>
                            </template>
                        </ul>
                    </nav>
                </template>
            </PageHeader>
            <article class="friend-tab page status-publish hentry">
                <section class="friend-link active">
                    <template v-for="friend in friendList">
                        <div class="friend-link-box" :id="friend.name">
                            <hgroup class="link-nav">
                                <h6 class="link-title">{{ friend.name }}</h6>
                                <span>{{ friend.description }}</span>
                            </hgroup>
                            <ul class="link-items">
                                <template v-for="item in friend.friendList">
                                    <li class="link-item" :rating="item.isRecommend">
                                        <a :href="item.linkAddress" class="link-card" :title="item.linkIntro"
                                           target="_blank"
                                           role="button">
                                            <img :alt="item.linkIntro"
                                                 :src="'https://s0.wp.com/mshots/v1/'+item.linkAddress+'?w=400&amp;h=300'"
                                                 class="link-bg loaded"
                                                 loading="lazy">
                                            <div class="link-info">
                                                <img alt=""
                                                     :src="item.linkAvatar"
                                                     class="avatar avatar-48 photo loaded"
                                                     height="48" width="48" decoding="async"
                                                     @error="handleErrorFriendAvatar($event,String(item.linkName).charAt(0),'2670e8')">
                                                <div class="link-cont">
                                                    <h6 class="link-name">{{ item.linkName }}</h6>
                                                    <div class="link-des">{{ item.linkIntro }}</div>
                                                </div>
                                            </div>
                                            <div class="note-time">
                                                风记得的第{{ item.id }}号恒星<br>
                                                该恒星的标签为{{ item.linkTag }}
                                            </div>
                                        </a>
                                        <div class="link-rss">
                                            <a class="rss-list new"
                                               href="#"
                                               title="RSS动态" target="_blank" role="button">
                                                <time class="rss-date">
                                                    <span>24小时</span>
                                                </time>
                                                <div class="rss-name">未获取RSS动态</div>
                                            </a>
                                            <a class="rss-list " href="#"
                                               title="加入星球时间" target="_blank" role="button">
                                                <time class="rss-date">{{ item.createTime }}</time>
                                                <div class="rss-name">加入本站</div>
                                            </a>
                                        </div>
                                        <div class="qrcode" data-fancybox data-src="#friend-qr-box"
                                             @click="makeQrCode(item.linkAddress)">
                                            <div class="qrcode-line"></div>
                                            <div class="qrcode-position">
                                                <img class="qrcode-image qrcode-image-1"
                                                     src="@/assets/user-grade/qr-grey.png" alt="grey">
                                                <img class="qrcode-image qrcode-image-2"
                                                     src="@/assets/user-grade/qr-hover.png" alt="hover">
                                            </div>
                                        </div>
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </template>
                </section>
                <div id="friend-qr-box" class="friend-qr-box">
                    <div class="friend-qr-image"></div>
                    <div class="friend-qr-desc-header">打开微信扫一扫</div>
                    <div class="friend-qr-desc">
                        扫一扫，在手机上浏览此博客
                    </div>
                </div>
            </article>
            <nav class="navigation page-navigation" role="navigation">
                <a class="color-btn icon-more has-btn-effect" href="/friends/add" role="button">
                    <small>与我成为朋友</small>
                </a>
            </nav>
        </template>
    </NuxtLayout>
</template>
<style scoped>
.qrcode {
    cursor: pointer;
    height: 90px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 90px;
    z-index: 5;
}

.qrcode-line {
    --qr-bg: #f7f9fd;
}
:root[theme="dark"] .qrcode-line {
    --qr-bg: hsl(214deg 64% 15%);
}
.qrcode-line {
    border-left: 90px solid transparent;
    border-top: 90px solid var(--qr-bg);
    height: 0;
    width: 0;
}

.qrcode-image {
    height: 25px;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 25px;
    z-index: 10;
}

.qrcode-image-1 {
    opacity: 1;
}

.qrcode-image-2 {
    opacity: 0;
}

.qrcode:hover .qrcode-image-1 {
    opacity: 0;
}

.qrcode:hover .qrcode-image-2 {
    opacity: 1;
}

.friend-qr-box {
    display: none;
}

.friend-qr-desc-header {
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    width: 100%;
}

.friend-qr-desc {
    display: flex;
    margin-top: 0.25rem;
    justify-content: center;
    width: 100%;
    color: #bcbcbc;
    font-size: 0.5rem;
}

.link-name, .link-des, .rss-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-transform: capitalize;
    word-break: break-all;
}

/* 列表 */
.friend-link {
    display: grid;
    gap: 2rem;
}

.link-items {
    display: grid;
    margin: 0;
    gap: 1rem;
    grid: auto / repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    list-style: none;
}

.link-item {
    --plant-rgb: 100 100 100;
    --plant-rgb-sub: 144 144 144;
    position: relative;
    font-size: var(--font-size-small);
    background: var(--w-bg);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-white);
    transition: .5s;
    overflow: hidden;
}

.link-item[rating="1"] {
    --plant-fc: white;
    --plant-rgb: 238 66 20;
    --plant-rgb-sub: 296 144 43;
}

.link-item:is([rating="0"]) {
    --plant-fc: rgb(0 30 70);
    --plant-rgb: 154 184 222;
    --plant-rgb-sub: 98 128 153;
}

.link-item:hover {
    z-index: 2;
    box-shadow: var(--box-shadow), 0 2rem 2rem -2rem rgb(var(--plant-rgb-sub) / .2);
}

.link-item:active {
    scale: .98;
}

.link-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin: 1rem;
    gap: 2em 1em;
}

.link-item .avatar, .rss-item .avatar {
    width: 2rem;
    flex: none;
    aspect-ratio: 1;
    border-radius: 50%;
    transition: all .5s;
    background: white;
    box-shadow: 0 0 15px 0px rgb(0 0 0 / 10%);
    box-shadow: 0 0 5rem .5rem rgb(var(--plant-rgb) / .4), 0 0.5rem 1rem 0rem rgb(var(--plant-rgb-sub) / .2);
    object-fit: cover;
    outline: .2rem solid rgb(var(--plant-rgb) / .1);
}

.link-des {
    word-break: break-all;
    overflow-wrap: anywhere;
    opacity: .5;
}

.link-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1rem;
}

.link-nav span {
    font-size: .5rem;
    color: hsl(var(--font-color) / .5);
    background: var(--w-bg);
    border-radius: 1em;
    box-shadow: var(--box-shadow);
    padding: 1em;
    margin: 0 0 -.5em;
    line-height: 1;
}

.link-title {
    font-size: 1.5rem;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px hsl(var(--font-color) / .2);
    -webkit-mask: linear-gradient(#000 80%, #0000 80%);
    margin: 0 0 -.3rem;
}

.link-info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1em;
    transform-origin: right;
    transition: .3s;
}

.link-bg {
    width: 100%;
    height: 100%;
    object-position: top left;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: .5s;
    filter: opacity(0) !important;
    transform: translateY(1rem);
    border-radius: var(--radius);
    border: .2rem solid rgb(var(--plant-rgb) / .15);
    background: var(--w-bg);
}

.note-time {
    flex: none;
    --plant-bg-lg: linear-gradient(135deg, rgb(var(--plant-rgb) / .7), rgb(var(--plant-rgb-sub) / .7));
    background: var(--plant-bg-lg, var(--plant-fc, hsl(var(--font-color) / .4)));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-align: right;
}

.link-edit {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.link-edit a {
    font-family: iconfont;
    font-size: var(--icon-size);
    line-height: var(--icon-size);
    color: rgb(var(--plant-rgb-sub) / .2);
    background: none !important;
}

.link-rss {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1em;
    padding: 0 1rem 1rem;
    transition: .3s;
}

.link-item:hover .link-bg {
    transform: none;
    filter: none !important;
}

.link-bg:hover {
    width: 100%;
    border-color: rgb(var(--plant-rgb) / .5);
}

.link-item:hover .link-info {
    opacity: 0;
    transform: translateY(-1rem);
    z-index: -1;
}

.rss-list {
    position: relative;
    padding: 0 0 0 1.5em;
    color: hsl(var(--font-color) / .5);
    transition: .3s;
}

.rss-list:hover {
    color: rgb(var(--plant-rgb));
}

.rss-list::before {
    opacity: .15;
    content: "";
    position: absolute;
    width: .4em;
    height: calc(100% - .5em);
    inset: 0 auto 0 0;
    margin: auto;
    border-radius: .4em;
    background: linear-gradient(135deg, rgb(var(--plant-rgb)), rgb(var(--plant-rgb-sub)));
    transition: .5s;
}

.rss-list:hover::before {
    opacity: .5;
}

.rss-no {
    opacity: .4;
    margin: 0 auto;
}

.rss-no::before {
    content: "\e708";
    font-family: 'iconfont';
    color: hsl(var(--font-color) / .5);
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
    margin: 0 .2em 0 0;
}

.rss-no.link::before {
    content: "\e746";
}

#org :is(.link-rss, .note-time) {
    display: none;
}

/* 按钮 */
.friend-link, .friend-rss {
    display: none;
}

section.active {
    display: grid;
    animation: var(--animation);
}

.toggle-btn {
    position: relative;
    padding: .5rem 0;
    cursor: pointer;
    grid-area: 1 / 1 / 1 / 1;
    z-index: 2;
}

.toggle-btn span {
    opacity: 0;
    position: absolute;
    left: 0;
    transition: .5s;
}

.toggle-btn:not(.list) .rss, .toggle-btn.list .card {
    opacity: 1;
    position: relative;
}

.toggle-btn span:before {
    content: "\e666";
    font-family: iconfont;
    margin: 0 .25rem 0 0;
    font-size: .9rem;
    line-height: 1em;
    vertical-align: middle;
}

.toggle-btn .rss:before {
    content: "\e625";
}

.taxonomy-nav {
    display: grid;
}

.taxonomy-sub {
    opacity: 0;
    visibility: hidden;
    grid-area: 2 / 1 / 3 / 1;
    transition: .5s;
}

.taxonomy-sub.active {
    opacity: 1;
    visibility: visible;
    animation: var(--animation);
}

@media (min-width: 1151px) {
    .link-card {
        flex-direction: column;
        align-items: flex-start;
        padding-inline: .5rem;
    }

    .link-card:hover + .link-rss {
        opacity: 0;
        transform: translateX(1rem);
    }

    .note-time {
        text-align: left;
    }

    .link-bg {
        width: 50%;
    }

    .link-info {
        width: 50%;
    }

    .link-rss {
        position: absolute;
        width: 50%;
        inset: 0 0 0 auto;
    }

    .rss-no {
        opacity: 0;
        transition: .3s;
    }

    .link-rss:hover .rss-no {
        opacity: .4;
    }
}

@media (max-width: 640px) {
    .rss-list {
        display: flex;
        gap: 1em;
    }
}
</style>
